<template>
  <div class="app-container">
    <div class="optionBox clearfix" style="margin: 0;">
      <div class="fr clearfix buttonBox new-refrech">
        <el-button
          class="btn-size fl"
          icon="el-icon-back"
          title="返回"
          onclick="javascript:window.history.back(-1);">
        </el-button>
        <el-button
          class="btn-size fl"
          icon="el-icon-refresh"
          title="刷新"
          @click="refresh">
        </el-button>
      </div>
    </div>
    <el-table
      :data="tableData"
      stripe
      class="table-out-border"
      v-loading="isLoading">
      <el-table-column align="center" prop="id" label="交易明细号" min-width="150"></el-table-column>
      <el-table-column align="center" prop="transferZiOrder.subOrderId" label="子订单号" min-width="150"></el-table-column>
      <el-table-column align="center" prop="createTime" label="创建时间" min-width="140">
        <template slot-scope="scope">{{scope.row.createTime|transformTimeF}}</template>
      </el-table-column>
      <el-table-column align="center" prop="orderType" label="交易类型" min-width="140">
        <template slot-scope="scope">{{scope.row.orderType|orderTypeStatusF}}</template>
      </el-table-column>
      <el-table-column align="center" prop="amount" label="金额(元)" min-width="100"> 
        <template slot-scope="scope">{{scope.row.amount|moneyFormatter}}</template>
      </el-table-column>
      <el-table-column align="center" prop="status" label="状态" min-width="100">
        <template slot-scope="scope">{{scope.row.status|transactionStatusF}}</template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
  import { clearNullAttr } from '@/api/common'
  import { querySubOrderDetail } from '@/api/order'
  
  export default {
    data: function() {
      return {
        isLoading: false,
        tableData: null,
        totalCount: null, // 数据总条数
        keywords: { // 查询参数
          subOrderId: this.$route.query.subOrderId // 子订单编号
        }
      }
    },
    filters: {
      orderTypeStatusF(statusCode) {
        const statusList = {
          '0': '扣保证金和手续费',
          '1': '扣款本金',
          '2': '付款',
          '3': '自动补扣',
          '4': '人工补扣',
          '5': '人工补付'
        }
        return statusList[statusCode]
      },
      transactionStatusF(statusCode) {
        const statusList = {
          '0': '成功',
          '1': '失败',
          '2': '超时'
        }
        return statusList[statusCode]
      }
    },
    computed: {},
    created: function() {
      this.fetchData()
    },
    methods: {
      fetchData() { // 查询子订单交易
        this.isLoading = true
        querySubOrderDetail(this.keywords, {}).then(res => {
          console.log('list', res)
          if (res.code === '000000') {
            this.tableData = res.data
            this.isLoading = false
          }
        }).catch(error => {
          this.isLoading = false
          console.log(error)
        })
      },
      refresh() { // 刷新按钮点击事件
        this.fetchData()
      }
    }
  }
</script>
<style lang="scss" scoped>
  /* type="text/scss" */
  .optionBox {
    label{
      margin-right: 10px;
    }
    form {
      .chooseInput {
        width: 300px;
        margin-right: 10px;
        .el-select {
          min-width: 110px;
        }
      }
    }
  }
</style>
